<template>
  <section class="section">
    <div id="car"></div>
  </section>
</template>
<script>
import { selectCarInfoList } from "@/api/emergencyDispatch/emergencyDispatch.js";
export default {
  components: {},
  data() {
    return {
      carList: [],
    };
  },
  computed: {},
  mounted() {
    this.getSelectCarInfoList();
  },
  methods: {
    getSelectCarInfoList() {
      selectCarInfoList().then((res) => {
        this.carList = res.result;
        this.$nextTick(() => {
          this.initMap();
        });
      });
    },
    initMap() {
      const url = require("../../../assets/images/救护车.png");
      var map = new BMapGL.Map("car");
      var point = new BMapGL.Point(117.23, 31.82);
      map.centerAndZoom(point, 14);
      map.enableScrollWheelZoom(true);
      if (!this.carList.length) {
        return;
      }
      this.carList.forEach((item) => {
        // 创建小车图标
        var myIcon = new BMapGL.Icon(url, new BMapGL.Size(32, 36));
        // 创建Marker标注，使用小车图标
        var pt = new BMapGL.Point(item.CAR_LONGITUDE, item.CAR_LATITUDE);
        var marker = new BMapGL.Marker(pt, {
          icon: myIcon,
        });
        // 将标注添加到地图
        map.addOverlay(marker);
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.section {
  #car {
    width: 100%;
    height: 400px;
  }
}
</style>
